<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
  <style>
    body {
      background: #34495e;
    }

    #div {
      height: auto;
      min-height: 100%;
      width: 85%;
      min-width: 1000px;
      margin: auto;
      position: relative;
    }

    #spline {
      width: 49%;
      height: 330px;
      float: left;
    }

    #spline1 {
      width: 49%;
      height: 330px;
      float: left;
      margin-left: 10px;
    }

    #column {
      width: 49%;
      height: 300px;
      float: left;
      margin-top: 20px;

    }

    #column1 {
      width: 49%;
      height: 300px;
      float: left;
      margin-top: 20px;
      margin-left: 10px;
    }

    #pie {
      width: 49%;
      height: 280px;
      float: left;
      margin-top: 20px;
    }

    #pie1 {
      width: 49%;
      height: 280px;
      float: left;
      margin-top: 20px;
      margin-left: 10px;
    }

  </style>
</head>

<body>
  <div id="div">
    <div id="spline" align="center"></div>
    <div id="spline1" align="center"></div>
    <div id="column" align="center"></div>
    <div id="column1" align="center"></div>
    <div id="pie" align="center"></div>
    <div id="pie1" align="center"></div>
  </div>
  <script>
    $(function () {
      // 时间格式化方法
      Date.prototype.pattern = function (fmt) {
        var o = {
          "M+": this.getMonth() + 1, //月份 
          "d+": this.getDate(), //日 
          "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时 
          "H+": this.getHours(), //小时 
          "m+": this.getMinutes(), //分 
          "s+": this.getSeconds(), //秒 
          "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
          "S+": this.getMilliseconds() //毫秒 
        };
        var week = {
          "0": "\u65e5",
          "1": "\u4e00",
          "2": "\u4e8c",
          "3": "\u4e09",
          "4": "\u56db",
          "5": "\u4e94",
          "6": "\u516d"
        };
        if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        if (/(E+)/.test(fmt)) {
          fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "\u661f\u671f" :
            "\u5468") : "") + week[this.getDay() + ""]);
        }
        for (var k in o) {
          if (new RegExp("(" + k + ")").test(fmt)) {
            if (k == "S+") {
              fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("000" + o[k]).substr(("" + o[k]).length)));
            } else {
              fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            }
          }
        }
        return fmt;
      }
      var fulltime = [1548288900000, 1548289200000, 1548289500000, 1548289800000, 1548290100000, 1548290400000,
        1548290700000, 1548291000000, 1548291300000, 1548291600000, 1548291900000, 1548292200000, 1548292500000,
        1548292800000, 1548293100000, 1548293400000, 1548293700000, 1548294000000, 1548294300000, 1548294600000,
        1548294900000, 1548295200000, 1548295500000, 1548295800000, 1548296100000, 1548296400000, 1548296700000,
        1548297000000, 1548297300000, 1548297600000, 1548297900000, 1548298200000, 1548298500000, 1548298800000,
        1548299100000, 1548299400000
      ]
      $('#spline').highcharts({
        chart: {
          borderWidth: 0, //图标框宽度
          type: 'spline', //图表的类型
          ignoreHiddenSeries: true, //单条数据是否可见
          height: 330, //高度
          backgroundColor: 'rgba(255, 255, 255, 0)', //背景色
          plotBorderColor: null, //绘图区边框色 
          plotBackgroundColor: null, //绘图区背景色
          plotBackgroundImage: null, //绘图区背景图
          plotBorderWidth: null, //绘图区边框宽度
          plotShadow: false, //绘图区阴影
          borderWidth: 0, //边框宽度
          events: { //事件
            // load: function(){  //加载
            // this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);                    
            //    }
          }
        },
        credits: { //版权信息
          enabled: false //启用
        },
        title: { //标题
          text: 'Exporting is loaded but <em>enabled</em> is false' //文字
        },
        plotOptions: { //数据列配置
          series: { //通用数据列
            marker: { //数据点标记
              enabled: false //填充颜色
            },
          }
        },
        xAxis: { //X轴
          categories: fulltime, //分类轴
          // categories:['08:15','','09:10','','10:10','','11:10'],//分类轴
          gridLineWidth: 0, //网格线宽度
          labels: { //轴标签
            staggerLines: 2, //: 轴标签显示行数
            step: 2, //轴标签间隔显示
            style: { //: 样式
              color: '#fff'
            },
            formatter: function () { //格式化函数
              // return (this.value);
              return new Date(this.value).pattern("HH:mm")
            }
          },
          tickInterval: 4, //undefined
          tickmarkPlacement: 'on', //X轴的类别名称位于刻度线的中心
        },
        yAxis: { //Y轴
          title: { //标题
            text: '单位（个）',
            style: {
              color: "#fff"
            }
          },
          min: 0, //坐标轴的最小值
          gridLineWidth: 1, //网格线宽度
          labels: { //轴标签
            style: { //样式
              color: "#fff"
            }
          }
        },
        legend: { //图列
          verticalAlign: 'bottom', //垂直对齐
          backgroundColor: '',
          borderColor: '#CCC',
          borderRadius: '5',
          borderWidth: 1,
          shadow: false, //阴影
          itemStyle: {
            color: '#fff'
          }, //图列样式
          itemHoverStyle: { //图列悬停样式
            color: "#fff"
          }
        },
        tooltip: { //数据提示框
          //查看7维度数据开关打开时  才会有点击出现提示框
          enabled: true, //是否启用
          useHTML: true, //是否使用HTML渲染
          borderRadius: 20,
          borderWidth: 3,
          backgroundColor: 'rgba(0,0,0,0.8)',
          // shape:'',
          style: {
            color: '#fff'
          },
          formatter: function () { //格式化函数
            // return (this.value);
            return new Date(this.x).pattern("HH:mm") + '</br>' + this.series.name + ':' + unitExchange(this.y)
          }
        },
        series: [{ //数据列
          name: "最近三小时", //图列名称
          fontFamily: '"微软雅黑", "黑体", Verdana, Arial, Helvetica, sans-serif',
          color: '#ff7f0e',
          shadow: true, //阴影
          data: [409, 412, 801, 753, 391, 408, 1004, 1052, 611, 619, 1350, 2118, 3444, 3739, 4857, 4906,
            4479, 4186, 4475, 4551, 4342, 4336, 4328, 4489, 3988, 4022, 4455, 4519, 3969, 4060, 4153,
            4338, 3686, 3622, 2005, 1816
          ] //数组参数
        }, {
          name: "环比三小时",
          fontFamily: '"微软雅黑", "黑体", Verdana, Arial, Helvetica, sans-serif',
          color: '#8bbc21',
          shadow: true,
          data: [482, 499, 1204, 528, 442, 416, 1032, 423, 407, 435, 1022, 459, 418, 462, 960, 720, 372,
            446, 1043, 454, 390, 416, 1048, 647, 470, 429, 1022, 567, 468, 404, 1018, 543, 446, 426, 955,
            463
          ]
        }],
        exporting: {
          enabled: true
        }
      });
      $('#spline1').highcharts({
        chart: {
          borderWidth: 0, //图标框宽度
          type: 'spline', //图表的类型
          ignoreHiddenSeries: true, //单条数据是否可见
          height: 330, //高度
          backgroundColor: 'rgba(255, 255, 255, 0)', //背景色
          plotBorderColor: null, //绘图区边框色 
          plotBackgroundColor: null, //绘图区背景色
          plotBackgroundImage: null, //绘图区背景图
          plotBorderWidth: null, //绘图区边框宽度
          plotShadow: false, //绘图区阴影
          borderWidth: 0, //边框宽度
          events: { //事件
            // load: function(){  //加载
            // this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);                    
            //    }
          }
        },
        credits: { //版权信息
          enabled: true //启用
        },
        title: { //标题
          text: '' //文字
        },
        plotOptions: { //数据列配置
          series: { //通用数据列
            marker: { //数据点标记
              enabled: false //填充颜色
            },
          }
        },
        xAxis: { //X轴
          categories: fulltime, //分类轴
          // categories:['08:15','','09:10','','10:10','','11:10'],//分类轴
          gridLineWidth: 0, //网格线宽度
          labels: { //轴标签
            staggerLines: 1, //: 轴标签显示行数
            step: 1, //轴标签间隔显示
            style: { //: 样式
              color: '#fff'
            },
            formatter: function () { //格式化函数
              // return (this.value);
              return new Date(this.value).pattern("HH:mm")
            }
          },
          tickInterval: 4, //undefined
          tickmarkPlacement: 'on', //X轴的类别名称位于刻度线的中心
        },
        yAxis: { //Y轴
          title: { //标题
            text: '单位（个）',
            style: {
              color: "#fff"
            }
          },
          min: 0, //坐标轴的最小值
          gridLineWidth: 1, //网格线宽度
          labels: { //轴标签
            style: { //样式
              color: "#fff"
            }
          }
        },
        legend: { //图列
          verticalAlign: 'bottom', //垂直对齐
          backgroundColor: '',
          borderColor: '#CCC',
          borderRadius: '5',
          borderWidth: 1,
          shadow: true, //阴影
          itemStyle: {
            color: '#fff'
          }, //图列样式
          itemHoverStyle: { //图列悬停样式
            color: "#fff"
          }
        },
        tooltip: { //数据提示框
          //查看7维度数据开关打开时  才会有点击出现提示框
          enabled: true, //是否启用
          useHTML: true, //是否使用HTML渲染
          borderRadius: '20',
          borderWidth: 3,
          backgroundColor: 'rgba(0,0,0,0.8)',
          shape: 'square',
          style: {
            color: '#fff'
          },
          formatter: function () { //格式化函数
            // return (this.value);
            return new Date(this.x).pattern("HH:mm") + '</br>' + this.series.name + ':' + unitExchange(this.y)
          }
        },
        series: [{ //数据列
          name: "最近三小时", //图列名称
          fontFamily: '"微软雅黑", "黑体", Verdana, Arial, Helvetica, sans-serif',
          color: '#ff7f0e',
          shadow: true, //阴影
          data: [40911, 41211, 80111, 75311, 31191, 41108, 10104, 10152, 64511, 64519, 13550, 21518, 34444,
            3739, 4857, 4906, 4479, 4186, 4475, 4551, 4342, 4336, 4328, 4489, 3988, 4022, 4455, 4519,
            3969, 4060, 4153, 4338, 3686, 3622, 2005, 1816
          ] //数组参数
        }, {
          name: "环比三小时",
          fontFamily: '"微软雅黑", "黑体", Verdana, Arial, Helvetica, sans-serif',
          color: '#8bbc21',
          shadow: true,
          data: [44482, 55499, 14204, 67528, 44772, 41336, 10732, 423, 4807, 48835, 10782, 459, 418, 462,
            960, 74720, 3772, 47846, 10473, 45774, 39990, 41666, 104548, 64745, 47450, 42459, 10522,
            56257, 46448, 40224, 1018, 54453, 44456, 45426, 9555, 45663
          ]
        }],
        exporting: { //导出
          enabled: false //是否启用
        }
      });
      $('#column').highcharts({
          chart: {
            type: 'column',

            height: 270,
            backgroundColor: 'rgba(255, 255, 255, 0)',
            plotBorderColor: null,
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: null,
            plotShadow: false,
            borderWidth: 0,

          },
          title: {
            text: ''
          },
          credits: {
            enabled: false
          },
          xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            shadow: false,
            labels: {
              staggerLines: 2,
              
              formatter: function () {
                var num = ("+this.value+").indexOf(",");
                if (num != -1) {
                  return this.value.split(",")[0];
                } else {
                  return "";
                }
              },
              style: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            gridLineWidth: 0,
            title: {
              text: '流量（bits）',
              style: {
                color: 'red'
              }
            },
            labels: {
              style: {
                color: '#fff'
              }
            }
          },
          legend: {
            enabled: false
          },

          plotOptions: {
            column: {
              // cursor: 'pointer',
              borderColor: '',
              borderWidth: 0,
              // pointWidth: 20,
              colorByPoint: true,
            //  数值在柱形图的顶部显示  
              dataLabels: {
                enabled: true,
                style: {
                  color: '#fff',
                  fontSize:'12px',
                  textOutline: "none",
                  fontWeight: 'normal'
                },
                formatter: function () {

                  return unitExchange(this.y);
                },
                crop: false,
                overflow: "none"
              },

            },
            series: {
              // cursor:'pointer',
              allowPointSelect: true,
              point: {
                events: {
                  click: function () {
                    alert('111111')
                  }
                }
              }
            }
          },
          tooltip: {
            backgroundColor: 'rgba(0,0,0,0.8)',
            enabled: true,
            useHTML: true,
            borderWidth: 3,
            borderRadius: 10,
            shape: 'square',
            style: {
              color: '#fff'
            },
            // 此回调接受三个参数: labelWidth，labelHeight 和point。point包含plotX和 plotY的值，即参考点在绘图区上的位置，以及 chart.plotLeft和 chart.plotTop，即图表区距左边距和上边距的举例。
            positioner: function (labelWidth, labelHeight, point) {
              //return { x:point.plotX + this.chart.plotLeft, y: point.plotY };
              var tooltipX, tooltipY;
              if (point.plotX + labelWidth > this.chart.plotWidth) {
                tooltipX = point.plotX + this.chart.plotLeft - labelWidth - 10;
              } else {
                tooltipX = point.plotX + this.chart.plotLeft + 10;
              }

              if (point.plotY + labelHeight > this.chart.plotHeight) {
                tooltipY = this.chart.plotTop - 5; //+ this.chart.plotTop ;// - labelHeight - 20;
              } else {
                tooltipY = point.plotY + this.chart.plotTop - 10;
              }

              return {
                x: tooltipX,
                y: tooltipY
              };
            },
            formatter: function () {
              s = this.point.name + '</br>' + '<b>' + unitExchange(this.y) + '</b>';
              return s;
            }
          },
          series: [{
            data: [{
              name: 'name' + ':' + '20%',
              y: 1190,
              // color: 'red',
            }, {
              name: 'name' + ':' + '20%',
              y: 1114,
              // color: '#434348',
            }, {
              name: 'name' + ':' + '20%',
              y: 2221,
              // color: '#90ed7d',
            }, {
              name: 'name' + ':' + '20%',
              y: 2444,
              // color: '#f7a35c',
            }, {
              name: 'name' + ':' + '20%',
              y: 4114,
              // color: '#8085e9',
            }, {
              name: 'name' + ':' + '20%',
              y: 1190,
              // color: '#f15c80',
            }, {
              name: 'name' + ':' + '20%',
              y: 9119,
              // color: '#e4d354',
            }, {
              name: 'name' + ':' + '20%',
              y: 2119,
              // color: '#2b908f',
            }, {
              name: 'name' + ':' + '20%',
              y: 1119,
              // color: '#f45b5b',
            }, {
              name: 'name' + ':' + '20%',
              y: 2019,
              // color: '#91e8e1',
            }],
          }],
          exporting: {
            enabled: false
          }
        }),
        //.highcharts(); // return chart
        $('#column1').highcharts({
          chart: {
            type: 'column',
            height: 270,
            backgroundColor: 'rgba(255, 255, 255, 0)',
            plotBorderColor: null,
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: null,
            plotShadow: false,
            borderWidth: 0,

          },
          title: {
            text: ''
          },
          credits: {
            enabled: false
          },
          xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            shadow: false,
            labels: {
              staggerLines: 2,
              formatter: function () {
                var num = ("+this.value+").indexOf(",");
                if (num != -1) {
                  return this.value.split(",")[0];
                } else {
                  return "";
                }
              },
              style: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            gridLineWidth: 0,
            title: {
              text: '流量（bits）',
              style: {
                color: 'red'
              }
            },
            labels: {
              style: {
                color: '#fff'
              }
            }
          },
          legend: {
            enabled: false
          },

          plotOptions: {
            column: {
              // cursor: 'pointer',
              borderColor: '',
              borderWidth: 0,
              // pointWidth: 20,
              colorByPoint: true,
              dataLabels: {
                enabled: true,
                style: {
                  color: '#fff',
                  // fontSize:'12px',
                  textOutline: "none",
                  fontWeight: 'normal'
                },
                formatter: function () {

                  return unitExchange(this.y);
                },
                crop: false,
                overflow: "none"
              },

            },
            series: {
              // cursor:'pointer',
              allowPointSelect: true,
              point: {
                events: {
                  click: function () {
                    alert('111111')
                  }
                }
              }
            }
          },
          tooltip: {
            backgroundColor: 'rgba(0,0,0,0.8)',
            enabled: true,
            useHTML: true,
            borderWidth: 3,
            shape: 'square',
            style: {
              color: '#fff'
            },
            formatter: function () {
              s = this.point.name + '</br>' + '<b>' + unitExchange(this.y) + '</b>';
              return s;
            }
          },
          series: [{
            data: [{
              name: 'name' + ':' + '20%',
              y: 11900004007,
              // color: 'red',
            }, {
              name: 'name' + ':' + '20%',
              y: 41101111047,
              // color: '#434348',
            }, {
              name: 'name' + ':' + '20%',
              y: 62111112277,
              // color: '#90ed7d',
            }, {
              name: 'name' + ':' + '20%',
              y: 54111111545,
              // color: '#f7a35c',
            }, {
              name: 'name' + ':' + '20%',
              y: 44555555555,
              // color: '#8085e9',
            }, {
              name: 'name' + ':' + '20%',
              y: 11788888778,
              // color: '#f15c80',
            }, {
              name: 'name' + ':' + '20%',
              y: 55555554119,
              // color: '#e4d354',
            }, {
              name: 'name' + ':' + '20%',
              y: 21555555551,
              // color: '#2b908f',
            }, {
              name: 'name' + ':' + '20%',
              y: 44444444119,
              // color: '#f45b5b',
            }, {
              name: 'name' + ':' + '20%',
              y: 78353453519,
              // color: '#91e8e1',
            }],
          }],
          exporting: {
            enabled: false
          }
        }),
        $('#pie').highcharts({
          chart: {

            height: 280,
            marginLeft: 0,
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            backgroundColor: '#34495e',


            style: {
              color: "#F0F0F0"
            },

          },
          title: {
            text: ''
          },
          credits: {
            enabled: false
          },
          plotOptions: {
            series: {
              //stacking: 'normal',
              pointPadding: 10,
              pointWidth: 30,
              stickyTracking: true,
              marker: {
                enabled: false
              },
              point: {
                events: {
                  click: function () { //鼠标点击事件
                    alert('111')
                  }
                }
              },
            },

            pie: { //饼图
              allowPointSelect: true,
              borderWidth: false,
              shadow: false,
              enableMouseTracking: true,
              cursor: 'pointer', //指定鼠标滑过数据列时鼠标的形状。当绑定了数据列点击事件时，可以将此参数设置为 "pointer"，用来提醒用户改数据列是可以点击的
              //数据标签距离饼图边缘的距离，为负数就越靠近饼图圆心
              dataLabels: {
                distance: 10,
                enabled: false,
                crop: false,
                inside: true,
                color: '#F0F0F0',
                connectorColor: 'red',
                formatter: function () {
                  if (this.point.name.trim().length == 0) {
                    this.point.name == '未定义';
                  }
                  return '<b>' + this.point.name + '</b>: ' + this.y + 'M ' + Math.round(this.percentage * 100) /
                    100 + ' %';
                }
              },
              showInLegend: true,

            }
          },
          tooltip: {
            backgroundColor: 'rgba(0,0,0,0.8)',
            enabled: true,
            useHTML: true,
            borderWidth: 3,
            style: {
              color: '#fff'
            },
            formatter: function () {
              s = this.point.name.split(",")[0] + ':<b>' + unitExchange(this.y) + '</b>';
              return s;
            }
          },
          legend: {
            width: 170,
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            itemMarginTop: 3,
            itemMarginBottom: 4,
            borderWidth: 1,
            borderRadius: 5,
            itemStyle: {
              color: "#f0f0f0"
            },
            itemHiddenStyle: {
              color: '#747474'
            },
            itemHoverStyle: {
              color: 'red'
            },
            symbolRadius: 2
          },
          series: [{
            type: 'pie',
            name: '',
            data: [{
                name: '10.1.1.3' + "," + '22.35%',
                y: 5.8399997952E10,
                id: 0
              },
              {
                name: '10.1.1.3' + "," + '22.35%',
                y: 5.8399997952E10,
                id: 0
              },
              {
                name: '10.1.1.3' + "," + '22.35%',
                y: 5.8399997952E10,
                id: 0
              },
              {
                name: '10.1.1.3' + "," + '22.35%',
                y: 5.8399997952E10,
                id: 0
              },
              {
                name: '10.1.1.3' + "," + '22.35%',
                y: 5.8399997952E10,
                id: 0
              },
              {
                name: '10.1.1.3' + "," + '22.35%',
                y: 5.8399997952E10,
                id: 0
              },
              {
                name: '10.1.1.3' + "," + '22.35%',
                y: 5.8399997952E10,
                id: 0
              },
              {
                name: '10.1.1.3' + "," + '22.35%',
                y: 5.8399997952E10,
                id: 0
              },
              {
                name: '10.1.1.3' + "," + '22.35%',
                y: 5.8399997952E10,
                id: 0
              },
              {
                name: '10.1.1.3' + "," + '22.35%',
                y: 5.8399997952E10,
                id: 0
              },
              {
                name: '10.1.1.3' + "," + '22.35%',
                y: 5.8399997952E10,
                id: 0
              },
              {
                name: '10.1.1.3' + "," + '22.35%',
                y: 5.8399997952E10,
                id: 0
              },
              {
                name: '10.1.1.3' + "," + '22.35%',
                y: 5.8399997952E10,
                id: 0
              },
            ]
          }]
        }),
        $('#pie1').highcharts({
          chart: {

            height: 280,
            marginLeft: 0,
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            backgroundColor: '#34495e',


            style: {
              color: "#F0F0F0"
            },

          },
          title: {
            text: ''
          },
          credits: {
            enabled: false
          },
          plotOptions: {
            series: {
              //stacking: 'normal',
              pointPadding: 10,
              pointWidth: 30,
              stickyTracking: true,
              marker: {
                enabled: false
              },
              point: {
                events: {
                  click: function () { //鼠标点击事件
                    alert('111')
                  }
                }
              },
            },

            pie: { //饼图
              allowPointSelect: true,
              borderWidth: false,
              shadow: false,
              enableMouseTracking: true,
              cursor: 'pointer', //指定鼠标滑过数据列时鼠标的形状。当绑定了数据列点击事件时，可以将此参数设置为 "pointer"，用来提醒用户改数据列是可以点击的
              //数据标签距离饼图边缘的距离，为负数就越靠近饼图圆心
              dataLabels: {
                distance: 10,
                enabled: false,
                crop: false,
                inside: true,
                color: '#F0F0F0',
                connectorColor: 'red',
                formatter: function () {
                  if (this.point.name.trim().length == 0) {
                    this.point.name == '未定义';
                  }
                  return '<b>' + this.point.name + '</b>: ' + this.y + 'M ' + Math.round(this.percentage * 100) /
                    100 + ' %';
                }
              },
              showInLegend: true,

            }
          },
          tooltip: {
            backgroundColor: 'rgba(0,0,0,0.8)',
            enabled: true,
            useHTML: true,
            borderWidth: 3,
            style: {
              color: '#fff'
            },
            formatter: function () {
              s = this.point.name.split(",")[0] + ':<b>' + unitExchange(this.y) + '</b>';
              return s;
            }
          },
          legend: {
            width: 170,
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            itemMarginTop: 3,
            itemMarginBottom: 4,
            borderWidth: 1,
            borderRadius: 5,
            itemStyle: {
              color: "#f0f0f0"
            },
            itemHiddenStyle: {
              color: '#747474'
            },
            itemHoverStyle: {
              color: 'red'
            },
            symbolRadius: 2
          },
          series: [{
            type: 'pie',
            name: '',
            data: [{
                name: '其他地区' + "," + '22.35%',
                y: 5.8399997952E10,
                id: 0
              },
              {
                name: '北京' + "," + '22.35%',
                y: 5.8399997952E10,
                id: 0
              },
              {
                name: '湖南' + "," + '22.35%',
                y: 5.8399997952E10,
                id: 0
              },
            ]
          }]
        })
    })


    // 设置y值的格式
    var FACTOR = 1000;

    function unitExchange(pointY) {
      var str = "";
      if (pointY < FACTOR) {
        str = pointY;
      } else if (pointY < FACTOR * FACTOR) {
        str = Math.round(pointY / 10) / 100 + 'k';
      } else if (pointY < FACTOR * FACTOR * FACTOR) {
        str = Math.round(pointY / (10 * FACTOR)) / 100 + 'M';
      } else if (pointY < FACTOR * FACTOR * FACTOR * FACTOR) {
        str = Math.round(pointY / (10 * FACTOR * FACTOR)) / 100 + 'G';
      } else if (pointY < FACTOR * FACTOR * FACTOR * FACTOR * FACTOR) {
        str = Math.round(pointY / (10 * FACTOR * FACTOR * FACTOR)) / 100 + 'T';
      } else {
        str = Math.round(pointY / (10 * FACTOR * FACTOR * FACTOR * FACTOR)) / 100 + 'P';
      }
      return str;
    }

  </script>
</body>

</html>
